import React, { useState, useMemo, useRef, useEffect } from 'react'
import '../page/content/Recomment.moudle.css'
type Props = {}

const Nav = (props: Props) => {
    const ImgArr: string[] = [
        'public/images/xc1.webp',
        'public/images/xc2.webp',
        'public/images/xc3.webp',
        'public/images/xc4.webp',
        'public/images/xc5.webp',
        'public/images/xc6.webp',
        'public/images/xc7.webp',
        'public/images/xc8.webp',
    ]
    var [num, setNum] = useState(0)
    const text = useRef<HTMLDivElement | null>(null)
    const parent = useRef<HTMLDivElement | null>(null)
    const [width, setWidth] = useState<number>(0)
    const [length, setLength] = useState<number>(0)
    useEffect(() => {
        if (parent.current && text.current) {
            setLength(parent.current?.scrollWidth)
            setWidth(text.current.clientWidth)
        }

    }, [])
    var flag = useMemo(() => {
        if (width==0&&length==0) {
            return true
        }
        return num <= -length + width ? false : true
    }, [num])
    var flag1 = useMemo(() => {
        return num == 0 ? false : true
    }, [num])

    const myClick = () => {
        if ((length! - width! - Math.abs(num)) / width < 1) {
            num -= length % width
        }
        else {
            num -= width
        }
        setNum(num)
    }
    const myLeft = () => {
        if (Math.abs(num) / width < 1) {
            num += length % width
        }
        else {
            num += width
        }
        setNum(num)
    }
    return (
        <div className="box">
            <div className="arrow">
                <button onClick={myLeft} className='left' style={{ display: flag1 ? 'block' : "none" }}>左转</button>
                <button onClick={myClick} className='right' style={{ display: flag ? 'block' : "none" }}>右转</button>
            </div>
            <div className="text" ref={text} style={{
                width: "100%", overflow: "hidden",
                height: "100%"
            }}>
                <div className="nav1" ref={parent} style={{ transform: `translate(${num}px)`, transitionDuration: "3s" }}>

                    {ImgArr.map((i: string, j: number) => {
                        return <img src={i} key={j} alt="" />
                    })}
                </div>
            </div>
        </div>

    )
}

export default Nav